<template>
  <div class="app-container">
    <div class="content">
      <el-steps
        :active="active"
        finish-status="success"
        simple
        style="margin-top: 20px"
      >
        <el-step title="输入手机号"></el-step>
        <el-step title="设置新密码"></el-step>
        <el-step title="完成"></el-step>
      </el-steps>
      <div v-if="active == 1" class="item">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="ruleForm"
        >
          <el-form-item label="手机号：" prop="phone">
            <div class="code-box">
              <el-input v-model="ruleForm.phone"></el-input>
              <el-button
                type="primary"
                size="medium"
                class="btn"
                @click="getCode"
                :disabled="disabled"
                >{{ code }}</el-button
              >
            </div>
          </el-form-item>
          <el-form-item label="验证码：" prop="verification">
            <el-input v-model="ruleForm.verification"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div v-if="active == 2" class="item">
        <el-form
          :model="ruleForm1"
          :rules="rules1"
          ref="ruleForm1"
          label-width="100px"
          class="ruleForm"
        >
          <el-form-item label="密码：" prop="password">
            <el-input v-model="ruleForm1.password" type="password"></el-input>
          </el-form-item>
          <el-form-item label="确认密码：" prop="password">
            <el-input v-model="ruleForm1.repassword" type="password"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div v-if="active == 3" class="third item">
            <img src="../assets/done.png" alt="">
            <div>设置成功</div>
      </div>
      <div class="btn-box" @click="submitForm(active)">{{btnText}}</div>      
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      active: 1,
      disabled: false,
      code: "获取验证码",
      btnText:'下一步',
      ruleForm: {
        phone: "",
        verification: "",
      },
      ruleForm1: {
        password: "",
        repassword: "",
      },
      rules: {
        phone: [
          { required: true, message: "请输入手机号码", trigger: "blur" },
          {
            min: 11,
            max: 11,
            message: "请输入11位手机号码",
            trigger: "change",
          },
          {
            pattern:
              /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,
            message: "请输入正确的手机号码",
          },
        ],
        verification: [
          { required: true, message: "请输入验证码", trigger: "blur" },
        ],
      },
      rules1: {
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
        ],
        repassword: [
          { required: true, message: "请确认密码", trigger: "blur" },
        ],
      },
      seconds: 60,
      flag: true,
      timer: "",
      time: new Date().getTime(),
    };
  },
  methods: {
    getCode() {
      if (this.ruleForm.phone == "") {
        this.$message.error("请输入手机号");
      } else if (!/^1[0123456789]\d{9}$/.test(this.ruleForm.phone)) {
        this.$message.error("请输入正确手机号");
      } else {
        if (this.flag) {
          this.flag = false;
          let params = {
            time: this.time,
            tel: this.ruleForm.phone,
          };
          let result = this.$md5.transferValue(params);
          this.axios
            .post(this.stateUrl.updatePwdSendMsg, {
              time: this.time,
              tel: this.ruleForm.phone,
              sign: this.$md5.val(result),
            })
            .then((res) => {
              this.$message.success("短信发送成功");
              this.countDown();
            })
            .catch(() => {});
        }
      }
    },
    countDown() {
      if (this.seconds <= 0) {
        clearTimeout(this.timer);
        this.code = "重新获取";
        this.seconds = 60;
        this.flag = true;
      } else {
        this.code = `${this.seconds}秒`;
        this.seconds--;
        this.timer = setTimeout(() => {
          this.countDown();
        }, 1000);
      }
    },
    submitForm(active) {
     if(active == 1){
         this.$refs.ruleForm.validate((valid) => {
           if (valid) {
             let params = {
               time: this.time,
               tel: this.ruleForm.phone,
               msCode: this.ruleForm.verification,
             };
             let result = this.$md5.transferValue(params);
             this.axios
               .post(this.stateUrl.checkMsgCode, {
                 time: this.time,
                 tel: this.ruleForm.phone,
                 msCode: this.ruleForm.verification,
                 sign: this.$md5.val(result),
               })
               .then((res) => {
                 this.active = 2;
               })
               .catch(() => {});
           }
         });
     }
     else if(active == 2){
        this.$refs.ruleForm1.validate((valid) => {
           if (valid) {
             let params = {
               time: this.time,
               password: this.ruleForm1.password,
               tel: this.ruleForm.phone,
               msCode: this.ruleForm.verification,
             };
             let result = this.$md5.transferValue(params);
             this.axios
               .post(this.stateUrl.updatePwd, {
                 time: this.time,
                 password: this.ruleForm1.password,
                 tel: this.ruleForm.phone,
                 msCode: this.ruleForm.verification,
                 sign: this.$md5.val(result),
               })
               .then((res) => {
                 this.active = 3;
                 this.btnText = '去登录'
               })
               .catch(() => {});
           }
         });
     }
     else if(active == 3){
         this.$router.push('/login');
     }
    },
  },
};
</script>
<style lang="less" scoped>
.content {
  width: 80%;
  margin: 0 auto;
}
.code-box {
  display: flex;
}
.code-box .btn {
  margin-left: 30px;
}
.btn-box {
  width:300px;
  height:50px;
  line-height: 50px;
  background: #3170fd;
  color: #fff;
  cursor: pointer;
  margin:1rem auto 0;
  text-align: center;
  border-radius: 36px;
}
.ruleForm {
  margin-top: 30px;
}
.item{
    width:60%;
    margin:1rem auto 0;
}
.third{
    text-align: center;
    margin:2rem auto;
    div{
        margin-top:0.2rem;
        font-size:20px;
    }
}
</style>